/* Common */
body {
    padding: 2rem;
  } 
  .container {
    max-width: 960px;
    margin: 0 auto;
  }
  
  /* Brand logo slider */
  .brands {
    position: relative;
    overflow: hidden;
    height: 8.5rem;
  }
  
  .brands:hover .brands__wrapper,
  .brands:hover .brands__preWrapper {
    animation-play-state: paused;
  }
  
  .brands__preWrapper {
    position: relative;
    width: 100%;
    height: 8.5rem;
    transform: translateX(0%);
    animation: scroll1 10s linear infinite;
    animation-delay: 4s;
    animation-direction: alternate;
  
    will-change: transform;
  }
  
  .brands__wrapper {
    position: absolute;
    white-space: nowrap;
    transform: translateX(0%) translateZ(0);
    animation: scroll2 10s linear infinite;
    animation-delay: 4s;
    animation-direction: alternate;
  
    will-change: transform;
  }
  
  .brands__wrapper > a,
  .brands__wrapper > img {
    position: relative;
    display: inline-block;
    margin: 0 1rem;
    vertical-align: middle;
  }
  
  .brands__wrapper > a img {
    max-width: 15rem;
    max-height: 5.5rem;
  }
  
  @keyframes scroll1 {
    0% {
      transform: translateX(-0%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  
  @keyframes scroll2 {
    0% {
      transform: translateX(0%) translateZ(0);
    }
    100% {
      transform: translateX(-100%) translateZ(0);
    }
  }